<template>
  <el-popover :show-after="500" placement="left-start" title="" width="30%" @show="open">
    <template #reference>
      <template v-if="data.is_combination == 1">
        <!-- <svg-icon class="text-lg" icon-class="zu"></svg-icon> -->
        <!-- <img class="w-[25px] h-[25px]" src="@/assets/images/zu.png"/> -->
        <div
          class="bg-[#E50113] text-white text-xs w-[24px] h-[24px] leading-[24px] rounded-full text-center"
        >
          组
        </div>
      </template>
    </template>
    <div class="dialog-content">
      <el-table ref="tableRef" :data="tableData" border style="width: 100%">
        <el-table-column label="子SKU">
          <template #default="{ row }">
            <span>{{ row.goods_sku?.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="子SKU中文名">
          <template #default="{ row }">
            <span>{{ row.goods_sku?.sku_cn_title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组成量">
          <template #default="{ row }">
            <span>{{ row.quantity }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-popover>
</template>
<script setup name="childCombinationSKU">
import { ElMessage } from "element-plus";
import { getCombinationSKUChildDetail } from "./api.js";
const visible = ref(false);
const options = ref([]);

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { data } = toRefs(props);

const tableData = ref([]);

const open = () => {
  getDetails({ sku_id: data.value.id });
  visible.value = true;
};

const getDetails = async (form) => {
  try {
    const res = await getCombinationSKUChildDetail(form);
    tableData.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
